.attendance-details {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #EEEEEE;
  .header {
    height: 200rpx;
    color: #ffffff;
    background-color: #2172ED;
    .course-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      line-height: 1;
      padding: 0 24rpx;
      box-sizing: border-box;
      .course-info {
        width: 100%;
        .title {
          font-size: 36rpx;
          font-weight: bold;
          margin-bottom: 24rpx;
        }
        .content {
          display: flex;
          font-size: 28rpx;
          .column {
            flex: 1;
            line-height: 52rpx;
          }
        }
      }
      .go-details {
        display: flex;
        align-items: center;
        .common {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 196rpx;
          height: 60rpx;
          background-color: #1E66D5;
          font-size: 24rpx;
          color: #ffffff;
          border: 1rpx solid rgba(250, 250, 250, 0.2);
          border-radius: 30rpx;
        }
        .week {
          padding: 0 22rpx 0 10rpx;
          box-sizing: border-box;
          .title {
            display: flex;
            justify-content: center;
            width: 148rpx;
          }
          .icon {
            transform: rotate(-90deg);
            .icon-xiajiantou {
              font-size: 18rpx;
            }
          }
        }
        .hover-week {
          background-color: rgba(33, 114, 237, 0.8);
        }
      }
    }
  }
  .list-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 88rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    background-color: #ffffff;
    color: #2172ED;
    letter-spacing: 2rpx;
  }
  .list-content {
    .scroll-list {
      position: absolute;
      top: 288rpx;
      bottom: 0;
      .list {
        margin: 24rpx 24rpx 0;
        box-sizing: border-box;
        .item {
          width: 100%;
          margin-bottom: 24rpx;
          background-color: #ffffff;
          border-radius: 8rpx;
          box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(33,114,237,0.15);
          .course-main {
            display: flex;
            justify-content: space-between;
            line-height: 1;
            padding: 32rpx;
            box-sizing: border-box;
            .course-info {
              width: 100%;
              .title {
                font-size: 36rpx;
                font-weight: bold;
                color: #111111;
                line-height: 88rpx;
              }
              .content {
                display: flex;
                font-size: 28rpx;
                color: #666666;
                .column {
                  flex: 1;
                  line-height: 52rpx;
                  .status1 {
                    color: #09BB07;
                  }
                  .status2 {
                    color: #FFC320;
                  }
                  .status3 {
                    color: #F94E4E;
                  }
                  .status4 {
                    color: #666;
                  }
                }
              }
            }
          }
          .hover-course-main {
            background-color: #F9FBFF;
          }
        }
      }
    }
  }
}